<!DOCTYPE html>
<html lang="en">
<head>
    <base href="../../">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/layui.css">
    <title>创建复选框</title>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">标签名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" lay-verify="required" lay-reqtext="输入框标签不能为空" placeholder="请输入输入框标签" value="" class="layui-input">
                <tip>复选框左侧显示的文字</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框样式</label>
            <div class="layui-input-block">
                <select name="size" id="size">
                    <option value="inline" checked>列</option>
                    <option value="block">行</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">设置选项</label>
            <button id="add_opt"  class="layui-btn layui-btn-sm">添加选项</button>
            <div class="layui-input-inline" id="optList">
                <input type="text" name="opt_0"  placeholder="请输入选项内容" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">创建</button>
            </div>
        </div>
    </div>

    <script src="layui.js"></script>
    <script>
        layui.use('form',function(){
            var form = layui.form;
            var $ = layui.$;
            var count=1;

            //监听提交
            form.on('submit(saveBtn)', function (data) {
                console.log("data",data,data.field);
                parent.layui.data("form_data",{
                    key: "carry",
                    // value: JSON.stringify(data.field)
                    value: data.field
                });
                
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            });

            $('#add_opt').on('click', function(){
                var inp = document.createElement('input');
                inp.type='text';
                inp.name="opt_"+count++;
                inp.placeholder="请输入选项内容";
                inp.className ="layui-input";
                this.nextElementSibling.append(inp);
                form.render();

            });
        });
    </script>
</body>
</html>